@extends('layout.member.master')
@section('content')
    <div class="card mt-4">
        <div class="card-body">
            <div class="header-body mt--5 mt-md--6">
                <div class="row align-items-center">
                    <div class="col">
                        <!-- Nav -->
                        <ul class="nav nav-tabs nav-overflow header-tabs">
                            <li class="nav-item">
                                <a href="{{route('home.lesson.index')}}" class="nav-link ">
                                    课程列表
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{route('home.lesson.create')}}" class="nav-link active" >
                                    课程添加
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="javascript:;" class="nav-link ">
                                    课程编辑
                                </a>
                            </li>

                        </ul>

                    </div>
                </div>
            </div>
        </div>
        <form action="{{route('home.lesson.store')}}" method="post" id="app">
            @csrf
        <div class="card-body">
            <div class="form-group">
                <label for="">课程标题</label>
                <input type="text" v-model="field.lesson.title"  class="form-control" placeholder="" aria-describedby="helpId">
            </div>
            <div class="form-group">
                <label for="">课程描述</label>
                <input type="text" v-model="field.lesson.description" class="form-control" placeholder="" aria-describedby="helpId">
            </div>
            <div class="form-group">
                <label for="">课程主图</label>
                <input class="form-control" v-model="field.lesson.icon" readonly="" value="">
                <div class="input-group-append">
                    <button @click="upImagePc()" class="btn btn-secondary" type="button">单图上传</button>
                </div>
                <div style="display: inline-block;position: relative;">
                    <img :src="field.lesson.icon" class="img-responsive img-thumbnail" width="150">
                </div>
            </div>
        </div>
            <div class="card-body mt-2">
                <div class="form-group">
                    <label for="">视频</label>
                    <label for="" @click="add()">添加视频</label>
                    {{--<a href="" @click.prevent="add" class="btn btn-white btn-sm">添加</a>--}}
                </div>
                <div v-for="(v,k) in field.video">
                <div class="form-group">
                    <label for="">视频标题</label>
                    <input type="text" v-model="v.title"  class="form-control" placeholder="" aria-describedby="helpId">
                </div>
                <div class="form-group">
                    <label for="">视频链接</label>
                    <input type="text" v-model="v.url"  class="form-control" placeholder="" aria-describedby="helpId">
                </div>
                    <a @click="del(k)" class="btn btn-danger btn-sm">删除</a>
                </div>
            </div>
        <div class="card-footer text-muted">
            <textarea hidden name="field">@{{field}}</textarea>
            <button type="submit" class="btn btn-info">提交</button>
        </div>
        </form>
    </div>
@endsection
@push('js')
    <script>
        require(['hdjs','vue','jquery'],function (hdjs,Vue,$) {
            new Vue({
                el:'#app',
                data:{
                    field:{!! json_encode ($field) !!}
                },
                methods:{
                    upImagePc(){
                        var options = {
                            multiple: false,//是否允许多图上传
                            //data是向后台服务器提交的POST数据
                            data: {name: '后盾人', year: 2099},
                        };
                        hdjs.image( (images)=> {
                            //上传成功的图片，数组类型
                            this.field.lesson.icon = images[0]
                        }, options)
                    },
                    del(index){
                        this.field.video.splice(index,1);
                    },
                    add(){
                        this.field.video.push({title:'',url:''});
                    },
                },
            })
            
        })
    </script>
    @endpush